<template>
<!-- 新版本：父组件直接传递所有参数 -->
	<view class="" style="width: 100%; display:flex;flex-direction: column;justify-content: center;align-items: center;">
		<my-pageMeta></my-pageMeta>
		<unicloud-db ref="CatgoryData" style="width: 80%;" class="white-box-list"
			v-slot:default="{data, loading, error, options}" orderby="last_modify_date desc"
			collection="my-music,my-music-categories" loadtime="auto"
			where="category_id._id=='61b3691f39bf100001e7ccc1'" @load="handleLoad"
			field="_id as id,category_id._id,category_id.name,title,music_src,author,poster,last_modify_date"
			:page-size="3">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading"><text class="loading">Loading&#8230;</text></view>
			<!-- <view class="">{{data}}</view> -->
			<my-Spacebetween id="mybox"  :outerLength="outerLength" :inLength="inLength" :listLen="listLen">
				<view class="white-lastmusic" v-for="(item,index) in data" :key="index">
					<view class="white-lastmusic-poster" @click="playOne(item)">
						<image :src="item.poster||'../../static/imgs/poster-basic4.png'" mode=""></image>
						<view class="palyIcon ri-play-fill">
						</view>
					</view>
					{{item.category_id[0].name}}
					<view class="font-hidden">{{item.title}}</view>
					<view class="fontsize-small fontcolor-secondary">{{item.author||'佚名'}}</view>
					<view class="fontsize-small fontcolor-secondary">发行时间：
						<uni-dateformat format="yyyy-MM-dd" :date="item.last_modify_date" />
					</view>
				</view>
			</my-Spacebetween>
		</unicloud-db>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				listLen: 0,
				outerLength: 0,
				inLength: 160,
			}
		},
		mounted() { //完成模板渲染后首次赋值
			uni.onWindowResize((res) => {
				this.getComponentsDom()
				this.outerLength = this.$refs.CatgoryData.$el.clientWidth
			    // console.log('变化后的窗口宽度=' + res.size.windowWidth)
			})
		},
		methods: {
			handleLoad(e) {
				this.listLen = e.length
				this.outerLength = this.$refs.CatgoryData.$el.clientWidth
			},
			getComponentsDom(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#mybox .white-lastmusic').boundingClientRect(data => {
					// console.log("得到布局位置信息" + JSON.stringify(data));
					console.log("子组件的节点宽度为" + data.width);
					this.inLength=data.width
				}).exec();
			}
		}
	}
</script>

<style>
</style>
